<template>
  <section>
    <div class="calculate">
      <div class="screen">
        <div>{{ word }}</div>
        <div>{{ result }}</div>
      </div>
      <div class="btns">
        <ul>
          <li v-for="(x, y) in btns" :key="y">
            <div @click="selectWord(x)" v-if="x.type == 1" class="type1">
              {{ x.name }}
            </div>
            <div @click="selectWord(x)" v-if="x.type == 2" class="type2">
              {{ x.name }}
            </div>
            <div @click="selectWord(x)" v-if="x.type == 3" class="type3">
              {{ x.name }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>
<script setup>
import { ref } from 'vue'

const btns = [
  {
    name: 'AC',
    type: 1,
  },
  {
    name: '%',
    type: 1,
  },
  {
    name: 'C',
    type: 1,
  },
  {
    name: '÷',
    value: '/',
    type: 1,
  },
  {
    name: '7',
    type: 2,
  },
  {
    name: '8',
    type: 2,
  },
  {
    name: '9',
    type: 2,
  },
  {
    name: '×',
    value: '*',
    type: 1,
  },
  {
    name: '4',
    type: 2,
  },
  {
    name: '5',
    type: 2,
  },
  {
    name: '6',
    type: 2,
  },
  {
    name: '-',
    type: 1,
  },
  {
    name: '1',
    type: 2,
  },
  {
    name: '2',
    type: 2,
  },
  {
    name: '3',
    type: 2,
  },
  {
    name: '+',
    type: 1,
  },
  {
    name: '00',
    type: 2,
  },
  {
    name: '0',
    type: 2,
  },
  {
    name: '.',
    type: 2,
  },
  {
    name: '=',
    type: 3,
  }
]
const word = ref('0')
const result = ref('0')
function selectWord(x) {
  // console.log()
}
</script>
<style scoped lang="scss">
.screen{
  width: 100%;
  height: 120px;
  >div{
    text-align: right;
  }
  >div:first-child{
    height: 60px;
    line-height: 60px;
    font-size: 24px;
  }
  >div:last-child{
    height: 60px;
    line-height: 60px;
    font-size: 24px;
  }
}
.btns {
  width: 288px;
  margin: 0 auto;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      width: 60px;
      height: 60px;
      margin: 5px;
      border-radius: 50%;
      border: 1px solid #fff;
      overflow: hidden;

      >div {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 700;
      }
      .type1{
        background-color: #ccc;
        color: #000;
      }
      .type3{
        background-color: #e07800;
      }
    }
  }
}
</style>
